<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">账户类型</view>
					<view class="list_bo">
						<u-radio-group
						    v-model="radiovalue1"
						    placement="row"
						    @change="groupChange"
						  >
						    <u-radio
						      :customStyle="{marginLeft:'16px'}"
						      v-for="(item, index) in radiolist1"
						      :key="index"
						      :label="item.name"
						      :name="item.id"
						      @change="radioChange"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
				
				<view class="dis_f_sb_c bor_bot" v-if="radiovalue1==1">
					<view class="black_s_28">持卡人姓名</view>
					<view class="list_bo">
						<u--input placeholder="请输入持卡人姓名" fontSize="14" border="none" v-model="value" @blur="blur"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot" v-if="radiovalue1==2">
					<view class="black_s_28">公司名称</view>
					<view class="list_bo">
						<u--input placeholder="请输入公司名称" fontSize="14" border="none" v-model="unit_name" @blur="blur"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">开户银行</view>
					<view class="list_bo dis_f_r_c" @click="show = true">
						<u--input placeholder="请输入开户银行" readonly fontSize="14" border="none" v-model="value1" @blur="blur1"></u--input>
						<image  class="r_img" :src="url+'/image/right.png'" mode=""></image>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot" v-if="radiovalue1==2">
					<view class="black_s_28">银行名称</view>
					<view class="list_bo dis_f_r_c" >
						<u--input placeholder="请输入开户银行"  fontSize="14" border="none" v-model="bank_name" ></u--input>
					
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">银行卡号</view>
					<view class="list_bo ">
						<u--input placeholder="请输入持卡人银行卡号" fontSize="14" border="none" v-model="value2" @blur="blur2"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c" v-if="radiovalue1==1">
					<view class="black_s_28">预留手机号</view>
					<view class="list_bo dis_f_r_c">
						<u--input placeholder="请输入银行预留手机号" fontSize="14" border="none" v-model="value3" @blur="blur3"></u--input>
					</view>
				</view>
			</view>
			<view>
				<u-picker :show="show" @confirm="confirm" @cancel="cancel" :columns="columns" keyName="yh_title"></u-picker>
			</view>
		</view>
		<view class="bule_back_but white_f_32 bot_wz" @click="submit">
			确定
		</view>
		<!-- <image class="bo_js_img" src="../../static/image/zcxian.png" mode=""></image> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "添加银行卡",
				value: '',
				value1: '',
				value2: '',
				value3: '',
				show: false,
				columns: [],
				bankid:0,
				// 基本案列数据
				  radiolist1: [{
					name: '个人账户',
					id:1,
					disabled: false
				  },
					{
					  name: '公户',
					  id:2,
					  disabled: false
					},
				  ],
				  // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				  radiovalue1: 1,
				  unit_name:'',
				  bank_name:'',
				  url:''
				  
			}
		},
		onLoad() {
			this.url=this.$.ajax_url3
			this.get_list()
		},
		methods: {
			get_list(){
				this.$.ajax(1,'post','store/store/bank',{},(res)=>{
					if(res.code == 200){
						this.columns = [res.data]
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			submit(){
				if(this.value == ''&&this.radiovalue1==1){
					return this.$.ti_shi('请输入姓名')
				}
				if(this.unit_name == ''&&this.radiovalue1==2){
					return this.$.ti_shi('请输入公司名称')
				}
				if(this.bank_name == ''&&this.radiovalue1==2){
					return this.$.ti_shi('请输入银行名称')
				}
				if(this.bankid == 0){
					return this.$.ti_shi('请选择开户行')
				}
				if(this.value2 == ''){
					return this.$.ti_shi('请输卡号')
				}
				if(this.value3 == ''&&this.radiovalue1==1){
					return this.$.ti_shi('请输入手机号')
				}
				this.$.ajax(1,'post','store/store/add_bank_card',{
					name:this.value,
					bankid:this.bankid,
					bankname:this.value1,
					bank_card_number:this.value2,
					mobile:this.value3,
					unit_name:this.unit_name,
					bank_name:this.bank_name,
					type:this.radiovalue1,
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 200){
						setTimeout(()=>{
							this.$.back()
						},600)
					}
				});
			},
			blur(e) {
				// console.log('change', e);
			},
			blur1(e) {
				// console.log('change', e);
			},
			blur2(e) {
				// console.log('change', e);
			},
			blur3(e) {
				// console.log('change', e);
			},
			confirm(n){
				console.log(n);
				this.value1 = n.value[0].yh_title
				this.bankid = n.value[0].id
				this.show = false
			},
			groupChange(n){
				console.log(n)
			},
			radioChange(){
				
			},
			cancel(){
					this.show = false
			},
		}
	}
</script>

<style>
	.list {
		margin-top: 200rpx;
		padding: 0 32rpx;
	}

	.list_bo {
		width: 478rpx;
		border-bottom: 2rpx solid #F7FAFF;
		padding-bottom: 10rpx;
		margin-top: 14rpx;
	}

	.bor_bot {
		margin-bottom: 40rpx;
	}

	.r_img {
		width: 32rpx;
		height: 32rpx;
	}
</style>